﻿@{
    ViewBag.Title = "ImgUploadBatch";
}
<html>
<head>
    <title>上传图片</title>
    <link href="@Url.Content("~/Areas/User/Css/all2.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Areas/User/Css/shop.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/JS/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/JS/artDialog/artDialog.js?skin=chrome")" type="text/javascript"></script>
    <script src="@Url.Content("~/JS/artDialog/plugins/iframeTools.source.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/JS/artDialog/dialogHelper.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/JS/artDialog/artDialog.source.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/JS/Gallery.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/JS/swfUploadImg/swfupload.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/JS/swfUploadImg/plugins/swfupload.speed.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/JS/SYHUpload.js")" type="text/javascript"></script>
</head>
<body>  

<div class="rightbar mt10">
        <ul class="tittab">
            <li><a hidefocus="" href="/User/Images/Album">管理相册</a></li>
            <li class="tcurrent"><a hidefocus="">上传图片</a></li>
           
        </ul>
        <div class="sellshow">
            <p class="mt5">
                <img src="/images/stepimg.jpg" />
            </p>
            <ul class="photit mt10">
                <li class="curpho"><a><span>批量上传</span></a></li>
                <li><a href="/Admin/Images/ImgUploadCommon"><span>普通上传</span></a></li>
            </ul>
            <div class="tip1 fd-left mt10">
                <p>
                    <span class="light f12">单次最多上传10张图片，图片最大不超过2M；支持jpg、gif、bmp格式图片。</span></p>
            </div>
            <p class="warn mt10">
                如您在上传过程中遇到问题，请<span class="under blue"><a href="#">安装flash</a></span>后再试，或使用<span
                    class="under blue"> <a href="#">普通上传</a></span>
            </p>
            <div class="upload">
                <ul>
                    <li><span class="fd-left layer fb">选择相册：</span> <span class="fd-left mt03">
                        <select name="albumselect" id="albumselect">
                        @helper renderAlum()
                                {
                                    System.Data.DataView dv = new System.Data.DataView(@ViewBag.Alum);

                                    foreach (System.Data.DataRowView drv in dv)
                                    {
                                        string id = drv["Id"].ToString();
                                <option value="@id")>
                                    @MvcHtmlString.Create(@drv["Name"].ToString())
                                </option>
                                    }
                            }
                            @renderAlum()
                        </select>
                    </span><span class="under blue pl10"><a href="###" onclick="AddAlbum()">新建相册</a></span>
                    </li>
                    <li>
                        <div style="display: @ViewBag.Id==0?"none":"inline";">
                            您还未创建相册，所上传图片将被上传至系统为您创建的<span class="orange"><a href="/User/Images/AlbumInfo?Id=@ViewBag.Id ">我的相册</a></span>中</div>
                    </li>
                    <li><span class="fd-left layer fb">添加图片：</span> 
                    <span class="orange-btn fd-left mt03"><a href="###" hidefocus=""><span  id="uploadBtn"></span></a></a></span>
                
                    </li>
                </ul>
            </div>
            <div class="fd-clear">
            </div>
            <div class="list">
                <table width="640" cellspacing="0" cellpadding="0" class="table-seo ml10">
                    <tr>
                        <th width="220" align="left">
                            待上传图片文件名列表
                        </th>
                        <th width="120">
                        </th>
                        <th width="160" align="center">
                            大小
                        </th>
                        <th width="120" align="center">
                            操作
                        </th>
                    </tr>
                    
                    <tr id="imgtongji" align="left" class="pl10">
                        <td colspan="2">
                            <span id="spimgcount">0</span>/10个文件
                        </td>
                        <td colspan="2" class="fb">
                            总大小 <span id="spimgsizecount">0KB</span>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="ml360 mt20">
                <input id="btnUploadImg" type="button" value="上 传" class="save-btn fd-left" onclick="return syhUpload.startUpload();" />
            </div>
        </div>
    </div>
   
    <script type="text/javascript">
        var imgCount = 0;
        var imgSizeCount = 0;
        var finishCount=0;
        
        function instaceUpload(value) {
            syhUpload.getInstance({
                uploadUrl: "/User/Images/AlbumImgUpload?ablumid="+value+"&t=" + Date(),
                placeHoldId: "uploadBtn",
                fileQueued: function (file) {
                    //debugger;
                    imgCount++;
                    imgSizeCount += file.size;
                    var html = "<tr id=\"" + file.id + "\" align=\"left\" bgcolor=\"#ffffff\"><td width=\"220\">" + file.name +"</td><td><div class='loding'><div class='lodingbg' style='width:0%;' id='div_progress"+file.index+"'></div></div><span width=\"120\" id='uppercent"+file.index+"'>( 等待上传中... )</span></td><td width=\"160\" align=\"center\">" + SWFUpload.speed.formatBytes(file.size) + "</td><td width=\"120\" class=\"blue\" align=\"center\"><a href=\"javascript:syhUpload.removeFile('" + file.id + "'," + file.size + ");\"><span class=\"delect\">删除</span></a></td></tr>";
                    $("#imgtongji").before(html);
                    $("#spimgcount").html(imgCount);
                    $("#spimgsizecount").html(SWFUpload.speed.formatBytes(imgSizeCount));
                },
                post_params: {
                    "ASPSESSID": "@Session.SessionID",
                    "AUTHID": "",
                    "ABLUMNID": value,
                    "USERID":""
                },
                uploadSuccess: function (file, serverData) {
                    //成功之后
                    finishCount++;
                    if(finishCount==imgCount){
                        jQuery.dialogHelper.alert("图片已上传成功!", "success","uploadSuc");
                    }
                },
                uploadProgress:function(file, bytesLoaded, bytesTotal){
                var percent = Math.ceil((bytesLoaded / bytesTotal) * 100)+"%";
                var thisProgress = $("#div_progress"+file.index);
                if (thisProgress) {
                   thisProgress.css("width",percent);
                }
                var thisPercent=$("#uppercent"+file.index)
                if(thisPercent)
                {
                   thisPercent.html(percent); 
                }
            }
            });
        }
        function uploadSuc() {
            var id=$("#albumselect").val();
            if (id!=null&&id!=undefined)
            {
                window.location="/User/Images/AlbumInfo?Id="+id;
            }
        }
        $(function () { 
            var albumnid = $("#albumselect").val();
            $("#albumselect").val(albumnid);
            $("#albumselect").change(function () {
                instaceUpload($(this).val());
            })
            if(albumnid=="" || albumnid=="null")
            {
                jQuery.dialogHelper.alert("请先创建相册！", "alert");  
            }
            else
            {
                instaceUpload(albumnid);
            }            
        })
        
        function AddAlbum() {
            var option = { id: '1231' };
            jQuery.dialogHelper.open("/Admin/Images/AlbumEdit", option);
        }
        function AlbumEdit() {
            $.ajax({
                type: "POST",
                url: "/Admin/Images/AlbumEdit",
                data: {"albumName":$("#txt_AlbumName").val()},
                dataType: "text",
                success: function (result) {
                    jQuery.dialogHelper.close(1231);
                    if (result.indexOf("成功") != -1) {
                        jQuery.dialogHelper.alert(result, "success","okSuccess");  //状态包括:success,smile,alert
                    } else {
                        jQuery.dialogHelper.alert(result, "alert");  
                    }
                },
                error: function () {
                    jQuery.dialogHelper.close(1231);
                    jQuery.dialogHelper.alert("网络忙，请稍后再试！", "alert");  
                }
            });
        }
        function okSuccess() {
            $.dialogHelper.close();
            location.reload();
        }
    </script>
    </body>
    </html>